<!--
 * @Author: daidai
 * @Date: 2022-03-01 15:27:58
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-05-07 11:24:14
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-center.vue
-->
<template>
  <Echart id="rightBottom" :options="options" class="" ref="charts" />
</template>

<script>
import * as API from '@/api/api'
export default {
  data() {
    return {
      options: {},
    };
  },
  computed: {
    getAdcode() {
      return this.$store.state.adcode;
    },
  },
  watch: {
    getAdcode() {
      this.init();
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      const res = await API.GET('/traffic/windSpeed',{adcode: this.$store.state.adcode});
      if (res.code !== '0') {
        return [];
      }
      let data = res.data;
      data = data.map(item => {
        if (item.name == null || item.name == '') {
          item.name = '不详'
        }
        return item;
      });
      // let piedata = {
      //   name: "",
      //   type: "pie",
      //   radius: ["42%", "65%"],
      //   avoidLabelOverlap: false,
      //   itemStyle: {
      //     borderRadius: 4,
      //     borderColor: "rgba(0,0,0,0)",
      //     borderWidth: 2,
      //   },
      //   data: data,
      // };
      this.options = {
        title: {
          // zlevel: 0,
          // text: ["{value|" + 1000 + "}", "{name|总数}"].join("\n"),
          top: "center",
          left: "center",
          textStyle: {
            rich: {
              value: {
                color: "#ffffff",
                fontSize: 24,
                fontWeight: "bold",
                lineHeight: 20,
              },
              name: {
                color: "#ffffff",
                lineHeight: 20,
              },
            },
          },
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            data: data
          },
          // 第一种最普通的
          // {
          //   name: 'Access From',
          //   type: 'pie',
          //   radius: '50%',
          //   data: data,
          //   emphasis: {
          //     itemStyle: {
          //       shadowBlur: 10,
          //       shadowOffsetX: 0,
          //       shadowColor: 'rgba(0, 0, 0, 0.5)'
          //     }
          //   }
          // },
          //展示圆点
          // {
          //   ...piedata,
          //   tooltip: { show: true },
          //   label: {
          //     formatter: "{b|{b}} \n {c|{c}个} \n {per|{d}%}",
          //     //   position: "outside",
          //     rich: {
          //       b: {
          //         color: "#fff",
          //         fontSize: 12,
          //         lineHeight: 26,
          //       },
          //       c: {
          //         color: "#31ABE3",
          //         fontSize: 14,
          //       },
          //       per: {
          //         color: "#31ABE3",
          //         fontSize: 14,
          //       },
          //     },
          //   },
          //   labelLine: {
          //     length: 20, // 第一段线 长度
          //     length2: 36, // 第二段线 长度
          //     show: true,

          //   },
          //   emphasis: {
          //     show: true,
          //   },
          // },
          // {
          //   ...piedata,
          //   tooltip: { show: true },
          //   itemStyle: {},
          //   label: {
          //     backgroundColor: "inherit", //圆点颜色，auto：映射的系列色
          //     height: 0,
          //     width: 0,
          //     lineHeight: 0,
          //     borderRadius: 2.5,
          //     shadowBlur: 8,
          //     shadowColor: "auto",
          //     padding: [2.5, -2.5, 2.5, -2.5],
          //   },
          //   labelLine: {
          //     length: 20, // 第一段线 长度
          //     length2: 36, // 第二段线 长度
          //     show: false,
          //   },
          // },
        ],
      };
    },
  },
};
</script>
<style lang='scss' scoped>
</style>